<template>
<a-modal
    :visible="visible"
    :centered="true"
    :maskClosable="false"
    width=80%
    :title="formName"
    :footer="null"
     @cancel="onClose">
  <a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider style="background: #fff; border-right: 1px solid #e8e8e8">
    <!-- 历史路径 -->
      <a-timeline>
        <div v-if="procStatus === '2'">
          <a-timeline-item v-for="(flow, index) in baseRecord.flowPathHist" v-if="index === 0" :key="flow.taskId">
            <a-icon type="up-circle" slot="dot" theme="twoTone" two-tone-color="#1890ff" style="font-size: 25px;" />
            <div style="font-size:18px; font-weight: bold; margin-bottom: 10px">&nbsp;&nbsp;&nbsp;{{flow.activityName}}</div>
            到达日期：{{flow.startDate}}<br />
            到达时间：{{flow.startTime}}<br />
          </a-timeline-item>
          <a-timeline-item v-for="(flow, index) in baseRecord.flowPathHist" v-if="index !== 0" :key="flow.taskId">
            <a-icon slot="dot" type="check-circle" theme="twoTone" two-tone-color="#52c41a" style="font-size: 25px;" />
            <div style="font-size:18px; font-weight: bold; margin-bottom: 10px">&nbsp;&nbsp;&nbsp;{{flow.activityName}}</div>
            完成日期：{{flow.endDate}}<br />
            完成时间：{{flow.endTime}}<br />
            经办人：{{flow.assignee}}<br />
            批注：{{flow.comment}}<br />
          </a-timeline-item>
        </div>
        <div v-else>
          <a-timeline-item v-for="flow in baseRecord.flowPathHist" :key="flow.taskId">
            <a-icon slot="dot" type="check-circle" theme="twoTone" two-tone-color="#52c41a" style="font-size: 25px;" />
            <div style="font-size:18px; font-weight: bold; margin-bottom: 10px">&nbsp;&nbsp;&nbsp;{{flow.activityName}}</div>
            完成日期：{{flow.endDate}}<br />
            完成时间：{{flow.endTime}}<br />
            经办人：{{flow.assignee}}<br />
            批注：{{flow.comment}}<br />
          </a-timeline-item>
        </div>
        <br />
      </a-timeline>
    </a-layout-sider>
    <a-layout>
      <a-layout-content :style="{padding: '24px', background: '#fff', minHeight: '100%' }">
         <!-- 表单区域 -->
      <fm-generate-antd-form
      :data="jsonData"
      :remote="remoteFuncs"
      :value="editData"
      :remote-option="dynamicData"
      ref="generateForm"
      v-if="visible"
    >
    </fm-generate-antd-form>
     <div class="drawer-bootom-button">
       <a-button style="margin-right: .8rem" @click="onClose">关闭</a-button>
      </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</a-modal>
</template>
<script>

const formItemLayout = {
  labelCol: { span: 3 },
  wrapperCol: { span: 18 }
}

export default {
  name: 'ProcessQueryForm',
  components: {},
  props: {
    visible: {
      default: false
    }
  },
  data () {
    let reqGet = this.$get // 避免在回调函数中使用this
    return {
      // todoList中的信息
      baseRecord: {
        flowPathHist: [],
        flowbarnchs: []
      },
      procStatus: null,
      procInstId: '',
      formName: '',
      jsonData: {},
      editData: {},
      remoteFuncs: {
        dictFunc (resolve, params) {
          reqGet('dict/getField?field=' + params).then((r) => {
            resolve(r.data)
          })
        },
        getUsers (resolve, params) {
          reqGet('user/getAllUsers').then((r) => {
            resolve(r.data)
          })
        },
        getDepts (resolve, params) {
          reqGet('dept/getAllDepts').then((r) => {
            resolve(r.data)
          })
        }
      },
      dynamicData: {},
      collapsed: false,
      loading: false,
      comment: '',
      formItemLayout
    }
  },
  computed: {
    show: {
      get: function () {
        return this.visible
      },
      set: function () {
      }
    }
  },
  methods: {
    setStatus (status) {
      this.procStatus = status
    },
    onClose () {
      this.editData = {}
      this.$emit('close')
    },
    setFormValues (procInstId, formName, formJson) {
      this.procInstId = procInstId
      this.comment = ''
      this.formName = formName
      this.jsonData = JSON.parse(formJson)
    },
    handleCandidateUsersClose () {

    },
    handleCandidateUsersSuccess () {

    }
  },
  watch: {
    visible () {
      if (this.visible) {
        this.$get('process/hisactivities?procInstId=' + this.procInstId + '&offSet=0&pageSize=10').then((r) => {
          this.baseRecord.flowPathHist = r.data.rows
        })
        this.$get('process/busidate?procInstId=' + this.procInstId).then((r) => {
          this.editData = JSON.parse(r.data.rows.flowData)
        })
      }
    }
  }
}
</script>
